/*
 * @Description: 
 * @Author: Zhang Zhangda
 * @Date: 2021-03-03 21:00:29
 * @LastEditTime: 2021-03-08 17:03:29
 * @LastEditors: Zhang Zhaoda
 */
import { NavLink, useLocation,UserModelState } from "umi"
import { useSelector } from "react-redux"
import "./index.less"
import { ReactNode, FC, useState, useEffect } from "react"
import { Layout, Menu } from 'antd';
import viewList from "@/config/userViewAuthority";
interface Iprops {
  children: ReactNode
}
interface Istore {
  login: UserModelState
}

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
let Index: FC<Iprops> = (props) => {
  //侧边栏
  const rootSubmenuKeys: string[] = []
  viewList&&viewList.forEach(item => {
    rootSubmenuKeys.push(item.title)
  });

  //默认打开的key
  const [openKeys, setOpenKeys] = useState<any>([rootSubmenuKeys[0]]);
  
  //获取路径
  let location = useLocation().pathname;

  //仓库数据
  let { userMenu } = useSelector(({ login }: Istore) => login);

  useEffect(() => {
    if(userMenu.length!==0){
      let a:any= userMenu&&userMenu.find(item => {
        return item.children.findIndex(view => view.path===location) !== -1
    })
    a&&setOpenKeys([a['title']]);
    }
},[location,userMenu])
  
  
  
  //默认展开收起事件
  
  const onOpenChange = (keys: any) => {
    
    const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);

    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys([keys]);
      
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
      
    }
  };
 
  return (
    <Layout id='box'>
      {/* 头部 */}
      <Header className="header">

      </Header>
      <Layout>
        {/* 侧边栏 */}
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            theme="dark"
            openKeys={openKeys}
            onOpenChange={onOpenChange}
            defaultSelectedKeys={[location]}
            // defaultOpenKeys={[openKeys]}
            style={{ height: '100%', borderRight: 0 }}
          >
            {
              userMenu.length !==0 ?
                userMenu.map((item) => {
                  return (
                    <SubMenu
                      key={item.title}
                      icon={<item.icon />}
                      title={item.title}>
                      {
                        item.children.map(val => {
                          return (
                            <Menu.Item key={val.path}>
                              <NavLink
                                to={val.path}
                              >{val.title}</NavLink>
                            </Menu.Item>
                          )
                        })
                      }

                    </SubMenu>
                  )
                }) : null
            }
          </Menu>
        </Sider>
        {/* 右侧显示路由 */}
        <Layout style={{ padding: '24px 24px' }}>
          <Content
            className="site-layout-background"
            // style={{
            //   padding: 24,
            //   margin: 0,
            //   minHeight: 280,
            //   position:'relative'
            // }}
          >
            {props.children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}
export default Index
